<template>
  <view id="page"
        class="page">
    <operate ref="operate">
      <div class="operate-btn">
        <text @tap="drawer()"
              class="btn cuIcon-roundadd text-green"></text>
        <text>添加感悟</text>
      </div>
    </operate>
    <select-btn ref="select"
                @emitEvent="emitEvent"
                @cancel="cancel"
                @selectAll="selectAll"></select-btn>
    <edit ref="edit"
          :editSense.sync="editSense"></edit>
    <view class="cu-timeline"
          v-for="(item,index) in timeline"
          :key="index">
      <view class="cu-time">{{index}}</view>
      <view v-for="(item1,index1) in item"
            :key="index1"
            :class="'cu-item '+item1.Icon"
            @tap="editContent(item1)"
            @longpress="showChecks(item1)">
        <view v-if="item1.Type==1"
              :class="'content shadow-blur '+item1.Color">
          {{item1.Content}}
        </view>
        <view v-else-if="item1.Type==2"
              :class="'content shadow-blur '+item1.Color">
          <text>{{item1.Hour}}</text> {{item1.Content}}
        </view>
        <view v-else-if="item1.Type==3"
              class="content">
          <view class="cu-capsule radius">
            <view class="cu-tag bg-cyan">上午</view>
            <view class="cu-tag line-cyan">{{item1.Hour}}</view>
          </view>
          <view class="margin-top">{{item1.Content}}</view>
        </view>

        <check-btn ref="check"
                   @select="select"
                   :showCheck="showCheck"
                   :index="item1.Sid"
                   :checked.sync="item1.Checked"></check-btn>
      </view>
    </view>
  </view>
</template>

<script>
import operate from '@/component/operate.vue'
import CheckBtn from '@/component/checkBtn.vue'
import SelectBtn from '@/component/selectBtn.vue'
import edit from './edit.vue'
import { confirm, modArr, r_GetContent, addCheck, r_UpdateContent } from "@/utils/function.js"
import { s_DelContent } from "@/utils/request.js"
export default {
  components: {
    operate,
    edit,
    CheckBtn,
    SelectBtn
  },
  data () {
    return {
      rid: -1,
      sense: [],
      timeline: {},
      tipContent: "",
      editSense: {},
      showCheck: false,
      delArr: [],
    };
  },
  methods: {
    drawer: function () {
      this.$refs.operate.closePopup()
      this.$refs.edit.showDrawer()
    },
    showChecks: function () {
      this.showCheck = !this.showCheck
      this.$refs.select.show()
    },
    emitEvent: function () {
      console.log(this.delArr.toString());
      let data = { "sids": this.delArr.toString() }
      s_DelContent(data).then(res => {
        console.log(res);
        if (res.data.data > 0) {
          r_UpdateContent(this.rid)
          confirm(1, "删除成功", 2, "/pages/sense/index?rid=" + this.rid)
        } else {
          confirm(0, "请选择删除对象", 4)
        }
      })
    },
    cancel: function () {
      this.showChecks()
      this.$refs.select.show()
      this.selectAll(false)
    },
    init: function (option) {
      this.rid = option.rid
      this.sense = r_GetContent(this.rid, this.sense)
      setTimeout(() => {
        this.sense = addCheck(this.sense)
        this.tipContent = '确定要删除吗'
      }, 1500);
    },
    getTimeLine: function () {
      this.sense.forEach(v => {
        this.timeline[v.Day] = this.timeline[v.Day] ? this.timeline[v.Day] : []
        this.timeline[v.Day].push(v)
      });
    },
    editContent: function (item) {
      console.log(item);
      this.editSense = item
      setTimeout(() => {
        this.$refs.edit.init()
        this.drawer()
      }, 100);
    },
    select: function (index) {
      this.delArr = modArr(this.delArr, index)
    },
    selectAll: function (flag) {
      if (flag == true) {
        this.sense.forEach(v => {
          this.delArr.push(v.Sid)
        });
      } else {
        this.delArr = []
      }
      for (let i = 0; i < this.$refs.check.length; i++) {
        this.$refs.check[i].check = flag
      }
    }
  },
  onLoad (option) {
    this.init(option)
    this.getTimeLine()
  },
  mounted () {
    // 动态修改按钮高度，并位置保持不变
    uni.createSelectorQuery().select('#page').boundingClientRect(data => {
      let that = this
      uni.getSystemInfo({
        success: function (res) {
          let top = res.safeArea.height * 0.75
          that.$refs.operate.top = "top:" + top.toString() + "px;"
        }
      });
      let height = parseInt(data.height)
      this.$refs.operate.high = "height:" + height.toString() + "px;";
    }).exec()
  },
  onHide: function () {
    this.$refs.operate.closePopup()
  },
}
</script>

<style lang="scss" scoped>
.cu-timeline .cu-time {
  width: 140rpx;
}
.cu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .content {
    width: 100%;
  }
}
</style>
